<template>
	<div id="{{idName}}" class="app-container">
		<list-search-bar ref="searchbar" :search-rule="searchRule" @submit="getList($event,pageInfo)" @add="showEdit()" @update:value="searchData=$event" />
		<list-table :showEdit="permissions.edit" @edit="showEdit($event)" @remove="remove" :showRemove="permissions.remove" v-loading="listLoading" :listRule="editRule" :listData="listData" />
		<pagination :page-sizes="[20]" :page-size="pageInfo.size" :current-page="pageInfo.page" :total="pageInfo.total" @pagination="getList(searchData,{...pageInfo,page:$event.page})" />
		<back-to-top :visibility-height="300" :back-position="0" transition-name="fade" />
		<el-dialog :close-on-click-modal="false" width="500px" :visible.sync="editDialog" v-loading="editLoading" title="填写信息"  v-dialogDrag custom-class="widget-dialog widget-form widget-search center no-margin color-white black-bg2">
			<form-create v-model="editFormInstance" :value.sync="editData" :rule="editRule" :option="editOptions" />
			<template slot="footer">
				<el-button size="mini" type="primary" @click="update(editData)">提交</el-button>
				<el-button size="mini" @click="reset">重置</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import {
	mock as searchApi, //获取列表的api
	mock as updateApi, //更新、新增数据的api
	mock as removeApi //删除数据的api
} from "@/api";
import { editRule, searchRule } from "@/formRules/system/{{name}}Rules";
import { editFormOptions, getData } from "@/formRules";
import cloneDeep from "lodash/cloneDeep";
import checkPermission from "@/utils/permission";
import {isDev} from "@/configurations.js"
export default {
	name: "{{name}}",
	configurations: {
		title: "{{cname}}",
		isDefault: true,
		show: true
	},
	data() {
		return {
			editRule: editRule(),
			listData: [],
			searchRule: searchRule(),
			searchData: {}, //搜索表单数据
			editFormInstance: {},
			editData: {},
			editOptions: editFormOptions(),
			editDialog: false,
			editLoading: false,
			listLoading: false,
			pageInfo: {
				page: 1,
        		size: 20,
				total: 0,
			},
			permissionList: [] //权限列表
		};
	},
	// 在路由导航进来之前检查权限
	beforeRouteEnter(from, to, next) {
		const permissionList = checkPermission(to.path);
		if (permissionList.length) {
			next(vm => {
				vm.permissionList = permissionList;
			});
			return;
		}
		next({
			name: "403"
		});
	},
	mounted() {
		this.getList(this.searchData, this.pageInfo);
	},
	computed: {
		// 根据获取的权限列表此处返回各个权限的显示与否
		permissions() {
			return ["edit", "remove","add"].reduce((pre, cur) => {
				pre[cur] = isDev?true:this.permissionList.includes(cur);
				return pre;
			}, {});
		}
	},
	methods: {
		/**
		 * @name 查询列表
		 * @param {Object} query 查询参数，一般为this.searchData
		 * @param {Object} pageInfo 页面参数，包括pageSize和pageNo
		 * @description 调用成功则刷新listData
		 */
		getList(query, pageInfo) {
			this.listLoading = true;
			const queryParam = {
				...pageInfo,
				...query
			};
			searchApi(queryParam)
				.then(res => {
					this.listData = res.data.list;
					delete res.data.list;
					Object.assign(this.pageInfo, res.data);
				})
				.finally(() => {
					this.listLoading = false;
				});
		},
		/**
		 * @name 编辑表单
		 * @param {Object} row 表单数据，新增时为空
		 * @description 调用成功打开表单对话框
		 */
		showEdit(row) {
			if (!row) {
				this.editData = getData(editRule());
			} else {
				this.editData = cloneDeep(row);
			}
			this.editDialog = true;
		},
		/**
		 * @name 更新数据
		 * @param editData 编辑的数据体
		 * @description 调用成功关闭对话框并且刷新表单
		 */
		update(editData) {
			if (!this.validation()) return;
			this.editLoading = true;
			updateApi(editData)
				.then(() => {
					this.$notified.success({
						message: "更新数据成功"
					});
					this.$refs?.searchbar.reset();
					this.getList(this.searchData, this.pageInfo);
					this.editDialog = false;
				})
				.finally(() => (this.editLoading = false));
		},
		/**
		 * @name 表单验证
		 * @description 如果有则在此处写入逻辑
		 * @returns {Boolean} 表单验证结果
		 */
		validation() {
			let satate = false;
			this.editFormInstance.validate((valid, fail) => {
				satate = valid;
			});
			return satate;
		},
		/**
		 * @name 删除数据项
		 * @description 成功后会刷新列表
		 */
		remove(row) {
			this.listLoading = true;
			removeApi({
				ids:[row.id]
			})
				.then(() => {
					this.$notified.success({
						message: "删除成功"
					});
					this.getList(this.searchData,this.pageInfo);
				})
				.finally(() => {
					this.listLoading = false;
				});
		},
		/**
		 * @name 重置表单数据
		 */
		reset() {
			this?.editFormInstance?.resetFields();
		}
	}
};
</script>

<style lang="scss" scoped>
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
#{{idName}} {
	position: relative;
	overflow: hidden;
}
</style>
